<template>
<div class="model-evaluation">
    <title-bar title="模型评估对比"></title-bar>
    <span :style="`padding-top: ${(modelDetail.summary.evaSummary.evaGraph.pointIndex[0] - 1) * 24}px`" class="important-target">*</span>
    <ve-histogram :colors="colors" :data-empty="chartData.rows.length===0" :legend-visible="true" width="100%" height="400px" :data="chartData" :extend="extend"></ve-histogram>
</div>
</template>

<script>
import TitleBar from '@/components/TitleBar'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'ModelEvaluation',
    components: {
        TitleBar
    },
    computed: {
        ...mapGetters({
            modelDetail: 'common/getModelDetail'
        })
    },
    data () {
        return {
            colors: ['#1F5080', '#8CC6FF', '#3F9EFF', '#466380', '#3380CC'],
            extend: {
                series: {
                    showSymbol: false,
                    barMaxWidth: 30
                },
                dataZoom: [{
                    type: 'inside'
                }],
                legend: {
                    orient: 'vertical',
                    left: '5px',
                    top: 0
                },
                grid: {
                    top: '10px',
                    left: '150px'
                },
                yAxis: {
                    position: 'left',
                    color: '#BBBBBB',
                    axisLine: {
                        show: true,
                    lineStyle: {
                        color: '#BBBBBB'
                    }
                    },
                    axisLabel: {
                    color: '#101010'
                    },
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                xAxis: {
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#BBBBBB'
                        }
                    },
                    axisLabel: {
                        color: '#101010'
                    },
                    axisTick: {
                        show: true
                    },
                    splitLine: {
                        show: false
                    }
                }
            },
            chartData: {
                columns: [],
                rows: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            this.chartData = {
                columns: this.modelDetail.summary.evaSummary.evaGraph.columns,
                rows: this.modelDetail.summary.evaSummary.evaGraph.rows.sort((a, b) => {
                    return a.ID - b.ID
                })
            }
        }
    }
}
</script>

<style lang="less">
.model-evaluation {
    position: relative;
    .important-target {
        position: absolute;
        left: 0;
        top: 52px;
        color: #E51C23;
    }
}
</style>
